<script lang="ts" setup>
import icon_app_outlined from '@/assets/svg/icon_app_outlined.svg'
import icon_dashboard_outlined from '@/assets/svg/icon_dashboard_outlined.svg'
import icon_database_outlined from '@/assets/svg/icon_database_outlined.svg'
import icon_operationAnalysis_outlined from '@/assets/svg/icon_operation-analysis_outlined.svg'
import userImg from '@/assets/svg/user-img.svg'
import icon_template_colorful from '@/assets/svg/icon_template_colorful.svg'
import no_result from '@/assets/svg/no_result.svg'
import { useI18n } from '@/hooks/web/useI18n'
import { ref, shallowRef, computed, reactive, watch } from 'vue'
import { usePermissionStoreWithOut } from '@/store/modules/permission'
import { useRequestStoreWithOut } from '@/store/modules/request'
import { interactiveStoreWithOut } from '@/store/modules/interactive'
import ShortcutTable from './ShortcutTable.vue'
import { useUserStoreWithOut } from '@/store/modules/user'
import { useRouter } from 'vue-router_2'
import { searchMarketRecommend } from '@/api/templateMarket'
import TemplateBranchItem from '@/views/workbranch/TemplateBranchItem.vue'
import { ElMessage } from 'element-plus-secondary'
import { useCache } from '@/hooks/web/useCache'
import DeResourceCreateOptV2 from '@/views/common/DeResourceCreateOptV2.vue'
import { Base64 } from 'js-base64'
import { useEmbedded } from '@/store/modules/embedded'
import { useAppStoreWithOut } from '@/store/modules/app'
import { useShareStoreWithOut } from '@/store/modules/share'
import { queryShareBaseApi } from '@/api/visualization/dataVisualization'

const shareStore = useShareStoreWithOut()

const userStore = useUserStoreWithOut()
const interactiveStore = interactiveStoreWithOut()
const permissionStore = usePermissionStoreWithOut()
const requestStore = useRequestStoreWithOut()
const { t } = useI18n()
const busiDataMap = computed(() => interactiveStore.getData)
const busiCountCardList = ref([])
const { wsCache } = useCache()
const { push } = useRouter()
const router = useRouter()
const resourceCreateOpt = ref(null)
const embeddedStore = useEmbedded()
const appStore = useAppStoreWithOut()
const openType = wsCache.get('open-backend') === '1' ? '_self' : '_blank'
const quickCreationList = shallowRef([
  {
    icon: icon_dashboard_outlined,
    name: 'panel',
    color: '#3370ff'
  },
  {
    icon: icon_operationAnalysis_outlined,
    name: 'screen',
    color: '#00d6b9'
  },
  {
    icon: icon_app_outlined,
    name: 'dataset',
    color: '#16c0ff'
  },
  {
    icon: icon_database_outlined,
    name: 'datasource',
    color: '#7f3bf6'
  }
])

const expandFold = ref('fold')
const handleExpandFold = () => {
  expandFold.value = expandFold.value === 'expand' ? 'fold' : 'expand'
}

const createAuth = computed(() => {
  return {
    PANEL: havePanelAuth.value,
    SCREEN: haveScreenAuth.value
  }
})

const havePanelAuth = computed(() => {
  return quickCreationList.value[0]['menuAuth'] && quickCreationList.value[0]['anyManage']
})

const haveScreenAuth = computed(() => {
  return quickCreationList.value[1]['menuAuth'] && quickCreationList.value[1]['anyManage']
})

const activeTabChange = value => {
  activeTabBtn.value = value
}

const tabBtnList = [
  {
    name: t('work_branch.recommended_dashboard'),
    value: 'PANEL'
  },
  {
    name: t('auth.screen'),
    value: 'SCREEN'
  }
]
const activeTabBtn = ref('PANEL')
const typeList = quickCreationList.value.map(ele => ele.name)
typeList.unshift('all_types')

const state = reactive({
  templateType: 'PANEL',
  baseUrl: null,
  marketTemplatePreviewShowList: [],
  hasResult: false,
  networkStatus: true,
  loading: false,
  dvCreateForm: {
    resourceName: null,
    templateId: null,
    name: null,
    pid: null,
    nodeType: 'panel',
    templateUrl: null,
    newFrom: 'new_market_template',
    panelType: 'self',
    panelStyle: {},
    panelData: '[]'
  }
})

watch(
  () => activeTabBtn.value,
  () => {
    initTemplateShow()
  }
)

const initMarketTemplate = async () => {
  await searchMarketRecommend()
    .then(rsp => {
      state.baseUrl = rsp.data.baseUrl
      state.marketTemplatePreviewShowList = rsp.data.contents
      state.hasResult = true
      initTemplateShow()
    })
    .catch(() => {
      state.networkStatus = false
    })
}

const initTemplateShow = () => {
  state.hasResult = false
  state.marketTemplatePreviewShowList.forEach(template => {
    template.showFlag = templateShowCur(template)
    if (template.showFlag) {
      state.hasResult = true
    }
  })
}

const templateShowCur = templateItem => {
  let templateTypeMarch = false
  if (activeTabBtn.value === templateItem.templateType) {
    templateTypeMarch = true
  }
  return templateTypeMarch
}
const fillCardInfo = () => {
  for (const key in busiDataMap.value) {
    if (key !== '3') {
      busiCountCardList.value.push(busiDataMap.value[key])
    }
    if (quickCreationList.value[key]) {
      quickCreationList.value[key]['menuAuth'] = busiDataMap.value[key]['menuAuth']
      quickCreationList.value[key]['anyManage'] = busiDataMap.value[key]['anyManage']
    }
  }
}
const quickCreate = (flag: number, hasAuth: boolean) => {
  if (!hasAuth) {
    return
  }
  switch (flag) {
    case 0:
      createPanel()
      break
    case 1:
      createScreen()
      break
    case 2:
      createDataset()
      break
    case 3:
      createDatasource()
      break
    default:
      break
  }
}

const createPanel = () => {
  const baseUrl = '#/dashboard?opt=create'
  window.open(baseUrl, openType)
}

const createScreen = () => {
  const baseUrl = '#/dvCanvas?opt=create'
  window.open(baseUrl, openType)
}
const createDataset = () => {
  let routeData = router.resolve({
    path: '/dataset-form'
  })
  window.open(routeData.href, openType)
}
const createDatasource = () => {
  const baseUrl = '#/data/datasource?opt=create'
  window.open(baseUrl, openType)
}

const templatePreview = previewId => {
  wsCache.set(`template-preview-id`, previewId)
  toTemplateMarket()
}

const templateApply = template => {
  state.dvCreateForm.name = template.title
  state.dvCreateForm.nodeType = template.templateType
  if (template.source === 'market') {
    state.dvCreateForm.newFrom = 'new_market_template'
    state.dvCreateForm.templateUrl = template.metas.theme_repo
    state.dvCreateForm.resourceName = template.id
  } else {
    state.dvCreateForm.newFrom = 'new_inner_template'
    state.dvCreateForm.templateId = template.id
  }
  apply()
}
const isDataEaseBi = computed(() => appStore.getIsDataEaseBi)

const apply = () => {
  if (state.dvCreateForm.newFrom === 'new_market_template' && !state.dvCreateForm.templateUrl) {
    ElMessage.warning(t('work_branch.template_market_official'))
    return false
  }
  const templateTemplate = {
    newFrom: state.dvCreateForm.newFrom,
    templateUrl: state.dvCreateForm.templateUrl,
    resourceName: state.dvCreateForm.resourceName,
    templateId: state.dvCreateForm.templateId
  }
  const baseUrl =
    (['dataV', 'SCREEN'].includes(state.dvCreateForm.nodeType)
      ? '#/dvCanvas?opt=create&createType=template'
      : '#/dashboard?opt=create&createType=template') +
    '&templateParams=' +
    encodeURIComponent(Base64.encode(JSON.stringify(templateTemplate)))
  let newWindow = null
  let embeddedBaseUrl = ''
  if (isDataEaseBi.value) {
    embeddedBaseUrl = embeddedStore.baseUrl
  }
  if (state.pid) {
    newWindow = window.open(embeddedBaseUrl + baseUrl + `&pid=${state.pid}`, openType)
  } else {
    newWindow = window.open(embeddedBaseUrl + baseUrl, openType)
  }
  initOpenHandler(newWindow)
}
const openHandler = ref(null)
const initOpenHandler = newWindow => {
  if (openHandler?.value) {
    const pm = {
      methodName: 'initOpenHandler',
      args: newWindow
    }
    openHandler.value.invokeMethod(pm)
  }
}

const toTemplateMarket = () => {
  push('/template-market/index')
}

const toTemplateMarketAdd = () => {
  if (havePanelAuth.value || haveScreenAuth.value) {
    const params = {
      curPosition: 'branchCreate',
      templateType: 'all'
    }
    resourceCreateOpt.value.optInit(params)
  }
}

const loadShareBase = () => {
  queryShareBaseApi().then(res => {
    const param = {
      shareDisable: res.data?.disable,
      sharePeRequire: res.data?.peRequire
    }
    shareStore.setData(param)
  })
}

fillCardInfo()
initMarketTemplate()
loadShareBase()
</script>

<template>
  <div class="workbranch" v-loading="requestStore.loadingMap[permissionStore.currentPath]">
    <div class="info-quick-creation">
      <div class="user-info">
        <el-icon class="main-color user-icon-container">
          <Icon name="user-img"><userImg class="svg-icon" /></Icon>
        </el-icon>
        <div class="info">
          <div class="name-role flex-align-center">
            <span :title="userStore.getName" style="max-width: 200px" class="name ellipsis">{{
              userStore.getName
            }}</span>
            <span class="role main-btn" />
          </div>
          <span v-if="userStore.getUid" class="id"> {{ `ID: ${userStore.getUid}` }} </span>
        </div>
        <div
          class="item"
          :class="{ 'de-item-hidden': !item['menuAuth'] }"
          v-for="(item, index) in busiCountCardList"
          :key="index"
        >
          <span class="name">
            {{ t(`auth.${quickCreationList[index].name}`) }}
          </span>
          <span class="num"> {{ item['menuAuth'] ? item['leafNodeCount'] : '*' }} </span>
        </div>
      </div>

      <div class="quick-creation">
        <span class="label"> {{ t('work_branch.create_quickly') }} </span>
        <div class="item-creation">
          <div
            :key="ele.name"
            class="item"
            :class="{
              'quick-create-disabled': !ele['menuAuth'] || !ele['anyManage']
            }"
            v-for="(ele, index) in quickCreationList"
            @click="quickCreate(index, ele['menuAuth'] && ele['anyManage'])"
          >
            <el-tooltip
              v-if="!ele['menuAuth'] || !ele['anyManage']"
              class="box-item"
              effect="dark"
              :content="t('work_branch.permission_to_create')"
              placement="top"
            >
              <div class="empty-tooltip-container" />
            </el-tooltip>
            <el-icon class="main-color" :style="{ backgroundColor: ele.color }">
              <Icon><component class="svg-icon" :is="ele.icon"></component></Icon>
            </el-icon>
            <span class="name">
              {{ t(`auth.${ele.name}`) }}
            </span>
          </div>
          <div
            class="item item-quick"
            :class="{
              'quick-create-disabled': !(havePanelAuth || haveScreenAuth)
            }"
            @click="toTemplateMarketAdd"
          >
            <el-tooltip
              v-if="!(havePanelAuth || haveScreenAuth)"
              class="box-item"
              effect="dark"
              :content="t('work_branch.permission_to_create')"
              placement="top"
            >
              <div class="empty-tooltip-container-template" />
            </el-tooltip>
            <el-icon class="main-color-quick template-create">
              <Icon name="icon_template_colorful"><icon_template_colorful class="svg-icon" /></Icon>
            </el-icon>
            <span class="name">{{ t('work_branch.new_using_template') }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="template-market-dashboard">
      <div class="template-market" :style="{ paddingBottom: expandFold !== 'fold' ? '24px' : 0 }">
        <div class="label">
          {{ t('work_branch.template_center') }}
          <div class="expand-all">
            <button class="all flex-center" @click="toTemplateMarket">
              {{ t('work_branch.view_all') }}
            </button>
            <el-divider direction="vertical" />
            <button @click="handleExpandFold" class="expand flex-center">
              {{ t(`visualization.${expandFold}`) }}
            </button>
          </div>
        </div>
        <template v-if="expandFold === 'fold'">
          <div class="tab-btn">
            <div
              v-for="ele in tabBtnList"
              :key="ele.value"
              :class="activeTabBtn === ele.value && 'active'"
              @click="activeTabChange(ele.value)"
              class="main-btn"
            >
              {{ ele.name }}
            </div>
          </div>
          <div class="template-list" v-show="state.networkStatus && state.hasResult">
            <template-branch-item
              v-for="(template, index) in state.marketTemplatePreviewShowList"
              v-show="template['showFlag']"
              :key="index"
              :template="template"
              :base-url="state.baseUrl"
              :create-auth="createAuth"
              @templateApply="templateApply"
              @templatePreview="templatePreview"
            >
            </template-branch-item>
          </div>
          <el-row v-show="state.networkStatus && !state.hasResult" class="template-empty">
            <div style="text-align: center">
              <Icon name="no_result" class="no-result"
                ><no_result class="svg-icon no-result"
              /></Icon>
              <br />
              <span class="no-result-tips">{{ t('work_branch.relevant_templates_found') }}</span>
            </div>
          </el-row>
          <el-row v-show="!state.networkStatus" class="template-empty">
            {{ t('visualization.market_network_tips', [state.baseUrl]) }}
          </el-row>
        </template>
      </div>
      <shortcut-table :expand="expandFold === 'expand'" />
    </div>
    <de-resource-create-opt-v2 ref="resourceCreateOpt"></de-resource-create-opt-v2>
  </div>
</template>

<style lang="less" scoped>
.workbranch {
  width: 100vw;
  height: calc(100vh - 56px);
  background: #f5f6f7;
  padding: 24px;
  display: flex;
  justify-content: space-between;

  .main-btn {
    display: inline-flex;
    height: 20px;
    padding: 0 6px;
    align-items: center;
  }

  .info-quick-creation {
    width: 360px;
    .main-color {
      background: var(--ed-color-primary);
      width: 32px;
      height: 32px;
    }
    .user-info {
      padding: 24px 16px 16px 16px;
      background: #fff;
      border-radius: 4px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .user-icon-container {
        width: 48px !important;
        height: 48px !important;
      }
      .ed-icon {
        font-size: 48px;
        padding: 8px;
        border-radius: 50%;
      }

      .info {
        margin: 0 0 24px 12px;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        width: calc(100% - 60px);
        height: 50px;
        .name-role {
          margin-bottom: 4px;
          color: #1f2329;
          font-family: var(--de-custom_font, 'PingFang');
          font-style: normal;
          .name {
            font-size: 16px;
            font-weight: 500;
            line-height: 24px;
          }

          .role {
            width: 55px;
            display: inline-flex;
            margin-left: 4px;
            height: 20px;
            padding: 0 6px;
            align-items: center;
            font-size: 12px;
            color: var(--ed-color-primary-dark-2, #2b5fd9);
            border-radius: 2px;
          }
        }
        .id {
          color: #646a73;
          font-size: 14px;
          font-weight: 400;
          line-height: 22px;
          width: 200px;
        }
      }

      .item {
        font-family: var(--de-custom_font, 'PingFang');
        font-style: normal;
        display: flex;
        flex-direction: column;
        width: 109px;
        height: 70px;
        padding: 8px;

        .name {
          color: #646a73;
          font-weight: 400;
          line-height: 22px;
          font-size: 14px;
        }
        .num {
          margin-top: 4px;
          color: #1f2329;
          font-size: 20px;
          font-weight: 500;
          line-height: 28px;
          letter-spacing: -0.2px;
        }
      }

      .de-item-hidden {
        cursor: not-allowed;
      }
    }

    .quick-creation {
      border-radius: 4px;
      background: #fff;
      margin-top: 16px;
      padding: 24px;

      .label {
        color: #1f2329;
        font-feature-settings: 'clig' off, 'liga' off;
        font-family: var(--de-custom_font, 'PingFang');
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: 24px;
      }

      .item-creation {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        .item {
          padding: 12px;
          width: 150px;
          margin-top: 16px;
          border-radius: 4px;
          border: 1px solid #dee0e3;
          display: flex;
          align-items: center;
          cursor: pointer;
          &:hover {
            box-shadow: 0px 6px 24px 0px rgba(31, 35, 41, 0.08);
          }

          .main-color {
            font-size: 21.33px;
            padding: 5.33px;
            margin-right: 12px;
            border-radius: 4px;
            color: #fff;
          }

          .name {
            color: #1f2329;
            font-family: var(--de-custom_font, 'PingFang');
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: 22px;
          }
        }

        .item-quick {
          width: 100%;
          .main-color-quick {
            font-size: 32px;
            margin-right: 12px;
          }
        }
        .quick-create-disabled {
          cursor: not-allowed;
          color: var(--ed-color-info-light-5);
          background-color: var(--ed-color-info-light-9);
          border-color: var(--ed-color-info-light-8);
          .name {
            color: var(--ed-color-info-light-5) !important;
          }
          .main-color {
            background-color: var(--ed-color-primary-light-8) !important;
            border-color: var(--ed-color-info-light-8) !important;
          }
          .empty-tooltip-container {
            width: 146px;
            position: absolute;
            height: 52px;
            margin-left: -16px;
          }
          .empty-tooltip-container-template {
            width: 300px;
            position: absolute;
            height: 52px;
            margin-left: -16px;
          }
          .template-create {
            opacity: 0.3;
          }
        }
      }
    }
  }

  .template-market-dashboard {
    width: calc(100% - 376px);
    height: 100%;

    .template-market {
      padding: 24px 24px 0;
      background: #fff;
      border-radius: 4px;
      .label {
        color: #1f2329;
        font-feature-settings: 'clig' off, 'liga' off;
        font-family: var(--de-custom_font, 'PingFang');
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: 24px;
        display: flex;
        justify-content: space-between;
        .expand-all {
          display: flex;
          align-items: center;
          font-size: 14px;
          font-weight: 400;
          line-height: 22px;
          border-radius: 4px;

          button {
            cursor: pointer;
          }

          .flex-center {
            padding: 0 4px;
            color: #646a73;
            border-radius: 4px;
            height: 26px;
            border: none;
            outline: none;
            background: none;
            &:hover {
              background: rgba(31, 35, 41, 0.1);
            }

            &:active {
              background: rgba(31, 35, 41, 0.2);
            }
          }
        }
      }

      .tab-btn {
        margin: 16px 0 8px 0;
        .main-btn {
          color: #1f2329;
          cursor: pointer;
          height: 24px;
          border-radius: 4px;
          background: rgba(31, 35, 41, 0.1);
          display: inline-flex;
          align-items: center;
          padding: 0 8px;
          font-family: var(--de-custom_font, 'PingFang');
          font-size: 12px;
          font-style: normal;
          font-weight: 400;
          line-height: 20px;
          & + .main-btn {
            margin-left: 8px;
          }

          &:hover {
            color: var(--ed-color-primary-dark-2, #2b5fd9);
          }

          &.active {
            color: var(--ed-color-primary-dark-2, #2b5fd9);
            background: var(--ed-color-primary-33, rgba(51, 112, 255, 0.2));
          }
        }
      }

      .template-list {
        display: flex;
        margin-left: -16px;
        overflow-x: auto;
        padding-bottom: 24px;
      }
    }
  }
}

.template-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(239, 240, 241, 1);
  color: rgba(100, 106, 115, 1);
  min-height: 60px;
}
.no-result {
  width: 74px;
  height: 74px;
}
.no-result-tips {
  font-size: 14px;
  color: rgba(100, 106, 115, 1);
}
</style>
